<template>
  <div>
    <el-row>
      <el-col :span="12" :offset="12">
        <el-input style="width: 100%; " size="small" v-model="keywords" placeholder="请输入关键词" @keyup.enter.native="selectPage">
          <el-select @change="selectPage" size="small" filterable collapse-tags clearable placeholder="请选择图书" slot="prepend"
                     v-model="bookId" style="width: 180px;">
            <el-option v-for="book in bookList"
                       :key="book.id"
                       :label="book.name"
                       :value="book.id"/>
          </el-select>
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </el-col>
    </el-row>
    <el-table :data="esArticleList" border stripe :height="tableHeight">
      <el-table-column label="图书名称" min-width="100" prop="bookName"/>
      <el-table-column label="文章名称" min-width="100" prop="title"/>
      <el-table-column label="内容" min-width="300" prop="unitContent">
        <template slot-scope="scope">
          <div class="contentDiv" v-html="scope.row.unitContent"></div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <span><el-link type="primary" @click.prevent="detail(scope.row.id)">详情</el-link></span>
          </template>
      </el-table-column>
    </el-table>
    <div>
      <el-pagination
        :total="total"
        :page-size.sync="pageSize"
        :current-page.sync="currentPage"
        @current-change="selectPage"
        @size-change="handleSizeChange"
        background
        layout="total, sizes, prev, pager, next, jumper"
        style="text-align: right;"></el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: "EsArticleTable",
    data() {
      return {
        keywords: '',
        bookId: '',
        bookList: [],
        esArticleList: [],
        tableHeight: CONST.WORKSPACE_HEIGHT - 80,
        pageSize: 10,
        currentPage: 1,
        total: 0,
      }
    },
    methods: {
      handleSizeChange() {
        this.currentPage = 1
        this.selectPage()
      },
      selectPage() {
        if (this.keywords) {
          this.axios.get('/pmph/action/esArticle/selectPage', {
            params: {
              keywords: this.keywords,
              bookId: this.bookId,
              currentPage: this.currentPage,
              pageSize: this.pageSize,
            }
          }).then((res) => {
            this.esArticleList = res.data.records
            this.total = res.data.total
          })
        }
      },
      detail(id) {
        // 获取当前素材字段图书文章;
        this.axios.get('/pmph/action/book/selectBookArticle', {
          params: {
            bookArticleId: id,
          }
        }).then((resp) => {
          this.$store.commit('setBookArticle', resp.data)
          this.$store.commit('showBookArticleDrawer')
        })
      },
    },
    created() {
      // 获取图书列表;
      if (this.bookList.length === 0) {
        this.axios.get('/pmph/action/book/selectBookList')
          .then((resp) => {
            this.bookList = resp.data
          })
      }
    }
  }
</script>

<style scoped>
/deep/ .contentDiv {
  max-height: 200px;
  overflow-y: auto;
  white-space: initial !important;
}
</style>
